<template>
  <div class="insp">
    <div class="insp-header">
      <div class="flexBetween">
        <div class="flex insp-header-left">
          <el-input placeholder="请输入任务名称" v-model="taskName" size="small" style="width: 180px;" class="mRight10">
          </el-input>
          <el-select v-model="taskStatus" placeholder="请选择任务状态" size="small" style="width: 140px;" class="mRight10"
                     clearable>
            <el-option v-for="item in taskStatusOpts1" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-select v-model="taskStatus" placeholder="请选择巡检人员" size="small" style="width: 140px;" class="mRight10"
                     clearable>
            <el-option v-for="item in taskStatusOpts1" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-select v-model="taskStatus" placeholder="请选择任务类型" size="small" style="width: 140px;" class="mRight10"
                     clearable>
            <el-option v-for="item in taskStatusOpts1" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" style="width:200px;"
                          v-model="taskTime" type="datetime" size="small" placeholder="请选择任务开始时间" class="mRight10" clearable>
          </el-date-picker>
          <!-- <el-select v-model="inspType" placeholder="请选择巡检类型" size="small" style="width: 140px;" class="mRight10">
            <el-option v-for="item in inspTypeOpts" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          -->
          <el-button type="primary" size="small" @click="queryForPage(1)">
            查询
          </el-button>
          <el-button size="small" class="insp-btn-add" icon="el-icon-plus" @click="handleAdd">添加临时任务</el-button>
        </div>
      </div>
    </div>

    <div class="insp-content">
      <div class="insp-table">
        <el-table :data="tableData" stripe :header-cell-style="{
          background: '#8595B9',
          color: '#fff',
          height: '44px',
        }" max-height="660px">
          <!-- <el-table-column type="expand">
             <template slot-scope="props">
               <el-table :data="props.row.itemList" :header-cell-style="{
                 color: '#999',
                 height: '44px',
               }" style="width: 100%; border: 1px solid #EBEEF5; border-bottom:0" class="insp-table-expand">
                 <el-table-column label="桥梁名称" prop="ownName" show-overflow-tooltip></el-table-column>
                 <el-table-column label="巡检项名称" prop="name" show-overflow-tooltip></el-table-column>
                 <el-table-column label="巡检规范" property="inspStandard" show-overflow-tooltip>
                   <template slot-scope="scope">
                     <span> {{ inspStandardText(scope.row.inspStandard) }}</span>
                   </template>
                 </el-table-column>
                 <el-table-column label="巡检人员" property="itemUserList" show-overflow-tooltip>
                   <template slot-scope="scope">
                     <span> {{ inspPersonText(scope.row.itemUserList) }}</span>
                   </template>
                 </el-table-column>
                 <el-table-column label="开始时间" prop="sdt" show-overflow-tooltip></el-table-column>
                 <el-table-column label="结束时间" prop="edt" show-overflow-tooltip></el-table-column>
                 <el-table-column label="任务周期" prop="duration" show-overflow-tooltip></el-table-column>
                 &lt;!&ndash; <el-table-column label="实际开始时间" prop="realSdt" show-overflow-tooltip></el-table-column> &ndash;&gt;
               </el-table>
             </template>
           </el-table-column>-->
          <el-table-column prop="rwbh" label="任务编号" show-overflow-tooltip></el-table-column>
          <el-table-column prop="rwmc" label="任务名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="startTime" label="任务执行时间范围" show-overflow-tooltip></el-table-column>
          <el-table-column prop="rwzt" label="任务状态" show-overflow-tooltip></el-table-column>
          <el-table-column prop="jd" label="进度" show-overflow-tooltip></el-table-column>
          <el-table-column prop="rwlx" label="任务类型" show-overflow-tooltip></el-table-column>
          <el-table-column prop="xjry" label="巡检人员" show-overflow-tooltip></el-table-column>
          <el-table-column prop="xjdx" label="巡检对象" show-overflow-tooltip></el-table-column>

          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-tooltip content="修改">
                <el-button type="text" icon="el-icon-edit-outline" @click="handelEdit(scope.row.id)">
                </el-button>
              </el-tooltip>
             <!-- <el-tooltip content="结束任务">
                <el-button type="text" icon="el-icon-circle-check" @click="handelTaskStatus(scope.row.id)">
                </el-button>
              </el-tooltip>-->
              <el-tooltip content="删除">
                <el-button type="text" icon="el-icon-delete" style="color: red !important;"
                           @click="handelDelete(scope.row.id)">
                </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="insp-page">
        <el-pagination background layout="prev, pager, next" :current-page.sync="currentPage"
                       :hide-on-single-page="false" @current-change="handlePageChange" :page-size="pageSize" :total="recordsTotal">
        </el-pagination>
      </div>

    </div>


    <!-- 新增/编辑任务-->
    <AddInspectionTask ref="addInspTaskChild" @closeAddInspTask="handleClose" :createType='4'></AddInspectionTask>
  </div>
</template>
<script>
  import AddInspectionTask from "./components/addInspectionTask";
  export default {
    data() {
      return {
        tableData: [{
          rwbh: 'RCXJ20210321001',
          rwmc: '四科一号线任务',
          startTime: '2021-03-02 08:00-17:30',
          rwzt: '已完成',
          jd: '5/5',
          rwlx: '周期性',
          xjry: '王浩、严斌',
          xjdx: '滨江大桥',
        },{
          rwbh: 'RCXJ20210321002',
          rwmc: '四科二号线任务',
          startTime: '2021-03-04 09:00-16:30',
          rwzt: '已完成',
          jd: '5/5',
          rwlx: '周期性',
          xjry: '陆建军',
          xjdx: '城闸大桥 ',
        },{
          rwbh: 'RCXJ20210321003',
          rwmc: '四科三号线任务',
          startTime: '2021-03-06 08:30-17:30',
          rwzt: '已完成',
          jd: '5/5',
          rwlx: '周期性',
          xjry: '顾娟、黄张宇',
          xjdx: '城闸大桥',
        },{
          rwbh: 'RCXJ20210321004',
          rwmc: '四科二号线任务',
          startTime: '2021-03-12 09:00-17:00',
          rwzt: '已完成',
          jd: '5/5',
          rwlx: '周期性',
          xjry: '黄张宇、单俊君',
          xjdx: '通吕一号桥',
        },{
          rwbh: 'RCXJ2021052005',
          rwmc: '四科三号线任务',
          startTime: '2021-05-2 08:00-17:30',
          rwzt: '未完成',
          jd: '0/5',
          rwlx: '周期性',
          xjry: '单俊君',
          xjdx: '城闸大桥、滨江大桥、通吕一号桥',
        }],
        pageSize: 14,
        currentPage: 1,
        recordsTotal: 0,
        taskName: '',
        taskTime: '',
        inspType: '',
        taskStatus: '',
        taskType: '',

        /* tableData: [],*/
        inspTypeOpts: [{
          label: '日常巡检',
          value: 0
        }, {
          label: '定期巡检',
          value: 1
        }
          // , {
          //   label: '特殊巡检',
          //   value: 2
          // }
        ],
        taskStatusOpts: [{
          label: '计划中',
          value: 0
        }, {
          label: '进行中',
          value: 1
        }, {
          label: '已结束',
          value: 2
        }],
        taskTypesOpts: [{
          label: '模板任务',
          value: 1
        },
          //  {
          //   label: '定时任务',
          //   value: 2
          // },
          {
            label: '快速任务',
            value: 3
          }, {
            label: '临时任务',
            value: 4
          }
        ],

        dialogDetailVisible: false,
        activeDetailName: "basicInfo",
        detailGroup: [{
          name: "取消",
          type: "border",
          funName: "cancelDetail"
        }],

      };
    },
    components: {
      AddInspectionTask,
    },
    watch: {
      '$route'(to, from) {
        this.queryForPage(1);
      }
    },
    created() {
      this.queryForPage(1);
    },
    methods: {
      handleAdd() {
        this.$refs.addInspTaskChild.add();
      },
      handelDelete(val) {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.insp.deleteTask(val).then(response => {
            if (response.data.success) {
              this.$vs.notify({
                text: '删除成功',
                color: "success",
                icon: "success"
              })
              let maxPage = Math.ceil((this.recordsTotal - 1) / this.pageSize);
              if (this.currentPage > maxPage) {
                this.currentPage = maxPage
              }
              this.handlePageChange(this.currentPage);
            } else {
              this.$vs.notify({
                text: "删除失败",
                color: "danger"
              })
            }
          })
        }).catch(() => {
          this.$vs.notify({
            text: "已取消删除",
            color: "primary"
          })
        });
      },
      handelEdit(val) {
        this.$refs.addInspTaskChild.edit(val);
      },
      handelTaskStatus(val) {
        this.$confirm('此操作将结束任务, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.insp.editTaskStatus(val, 2).then(response => {
            if (response.data.success) {
              this.$vs.notify({
                text: '任务结束成功',
                color: "success",
                icon: "success"
              })
              this.queryForPage(1);
            } else {
              this.$vs.notify({
                text: "任务结束失败",
                color: "danger"
              })
            }
          })
        }).catch(() => {
          this.$vs.notify({
            text: "已取消",
            color: "primary"
          })
        });
      },
      queryForPage(pageIndex) {
        let _userInfo = JSON.parse(localStorage.getItem("userInfo"));
        if (pageIndex && pageIndex === 1) {
          this.currentPage = 1;
        }
        const _params = {
          pageSize: this.pageSize,
          pageNum: this.currentPage,
          data: {
            name: this.taskName,
            staFlag: this.taskStatus,
            createType: this.taskType,
            sdt: this.taskTime || '',
            userId: _userInfo['userid'] || ''
          }
        }
        /* this.$api.insp.queryTaskPage(_params).then(response => {
           if (response.data.success) {
             this.tableData = response.data.data || [];
             this.recordsTotal = response.data.recordsTotal;
           }
         });*/
      },
      handlePageChange(currentPage) {
        this.currentPage = currentPage;
        this.queryForPage();
      },
      handleClose() {
        this.queryForPage(1);
      },
      inspPersonText(list) {
        let _text = '';
        list.forEach((item, index) => {
          if (!index) {
            _text += item.userName
          } else {
            _text += `、${item.userName}`
          }
        });
        return _text;
      },
      inspStandardText(type) {
        switch (type) {
          case 0:
            return '城市桥梁';
          case 1:
            return '道路桥梁';
        }
      },
      taskTypeText(type) {
        switch (type) {
          case 1:
            return '模板任务';
          case 2:
            return '定时任务';
          case 3:
            return '快速任务';
          case 4:
            return '临时任务';
        }
      },
      inspTypeClass(type) {
        switch (type) {
          case 0:
            return 'inspTypeA';
          case 1:
            return 'inspTypeB';
          case 2:
            return 'inspTypeC';
        }
      },
      inspTypeText(type) {
        switch (type) {
          case 0:
            return '日常巡检';
          case 1:
            return '定期巡检';
          case 2:
            return '特殊巡检';
        }
      },
      taskStatusClass(type) {
        switch (type) {
          case 1:
            return 'planStatusA';
          case 2:
            return 'planStatusB';
          case 3:
            return 'planStatusC';
          case 4:
            return 'planStatusD';
          case 5:
            return 'planStatusB';
          case 6:
            return 'planStatusC';
        }
      },
      taskStatusText(type) {
        switch (type) {
          case 0:
            return '计划中';
          case 1:
            return '进行中';
          case 2:
            return '已完成';
        }
      },

      handleTabDetailClick(tab, event) {
        this.activeDetailName = tab.name;
      },

    },
  };

</script>
<style scoped lang="scss">
  @import './insp.scss';

  /deep/.el-table__header tr,
  /deep/.el-table__header th {
    padding: 0;
    height: 44px;
  }

  /deep/.el-table td,
  /deep/.el-table th {
    text-align: center;
    font-size: 14px;
  }

  /deep/.el-table th {
    font-weight: 500;
    color: #fff;
  }

  /deep/.el-table td {
    font-weight: 400;
    color: #444;
    padding: 0;
    height: 44px;
    line-height: 44px;
  }

  /deep/.el-table--striped .el-table__body tr.el-table__row--striped td {
    background: #F1F5FC;
  }

  /deep/.el-table__expanded-cell {
    padding: 20px !important;
  }

  /deep/.el-button--mini.insp-task-addBtn {
    padding: 6px;
    font-size: 18px;
    font-weight: bolder;
  }



  /deep/.insp-plan-detailTabs .el-tabs__header {
    padding: 0;
    margin: -20px 0 0;
    background: #fff;
  }

  /deep/.insp-plan-detailTabs .el-tabs__item {
    font-size: 14px;
    font-weight: 400;
    color: #999;
    position: relative;

    text-align: center;
  }

  /deep/.insp-plan-detailTabs .el-tabs__active-bar {
    width: 12px !important;
    background-color: #327BDC;

    left: 28px;
    margin-left: -6px;
  }

  /deep/.insp-plan-detailTabs .el-tabs__content {
    min-height: 250px;
  }

  /deep/.el-tabs__item.is-active {
    color: #327BDC;
  }

</style>
